<template>
    <div class="container-bg">
        <div class="w">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <el-menu-item index="1">商品详情</el-menu-item>
                <el-menu-item index="2">用户评价</el-menu-item>
            </el-menu>
            <div class="xq-bg" :class="{ qie: showImg }">
                <img
                    src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/28b2ad55171b0c743d52f41fdb14d023-1467359039.jpg?">
                <img
                    src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/f6fd289a89b2eff3c14fd0465cb803e2163243437.jpg?">
            </div>
            <div :class="{ qie: showComment }">
                <div class="pinlun">
                    <div class="evalute">
                        <span v-for="evaluate in evalutes" :key="evaluate" :class="{ 'selected': selected === evaluate }"
                            @click="evaluateClick(evaluate)">
                            {{ evaluate }}
                        </span>
                    </div>
                </div>
                <div class="tabs-box">
                    <div>
                        <span v-for="tab in tabs" :key="tab" :class="{ 'tabsbox': tabsbox === tab }"
                            @click="tabsClick(tab)">
                            {{ tab }}</span>
                    </div>
                    <div>
                        <el-select style="border: none;" v-model="optionvalue" class="m-2" placeholder="Select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                </div>
                <!-- 用户评论 -->
                <div v-for="reviewdata in reviewdatas" :key="reviewdata" class="lest">
                    <div class="user">
                        <div style="height: 60px; width: 60px;" class="v-avatar">
                            <img style="height: inherit; border-radius: 30px;" :src=reviewdata.User.avatar>
                        </div>
                        <div class="user-flex">
                            <div class="user-data">
                                <div style="display: flex;">
                                    <span style="line-height: 17px; font-size: 16px;">{{ reviewdata.User.nickname }}</span>
                                </div>
                                <el-rate v-model="reviewdata.rating" disabled show-score text-color="#ff9900"
                                    score-template="{value} points" />
                            </div>
                            <div>
                                <span>{{ reviewdata.review_time }}</span>
                                <span v-for="GoodSku in reviewdata.GoodsSku" :key="GoodSku"> | {{ GoodSku.value }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="review">
                        <div style="font-size: 18px;">{{ reviewdata.review.data }}</div>
                        <div class="imgs">
                            <img v-for="img in reviewdata.review.image" :key="img" style="width: 80px; height: 80px;"
                                :src=img alt="">
                        </div>
                        <div class="kefu">
                            <div class="name"><span>商家回复：</span></div>
                            <div class="content">{{ reviewdata.extra.data }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import { reviewData } from '@/api/goods'
export default {
  data () {
    return {
      reviewdatas: [], // 所有评论
      selected: false,
      tabsbox: false,
      activeIndex: '1', // 默认选中的菜单索引值
      showImg: false, // 是否显示图片区域
      showComment: true, // 是否显示评论区域
      evalutes: ['手感一流', '拍照好', '外观漂亮', '官方正品', '多次购买', '屏幕出色'],
      tabs: ['全部', '图片/视频', '追评', '好评', '差评']
    }
  },
  methods: {
    // 请求用户评论数据
    async reviewdata () {
      try {
        const reviewdatas = await reviewData(this.$route.query.good_id)
        this.reviewdatas = reviewdatas.data.data
        // 原始输入数据，解析用户评论数据
        const data = this.reviewdatas

        for (let i = 0; i < data.length; i++) {
          const review = JSON.parse(data[i].review)// 解析评论
          data[i].review = review

          const extra = JSON.parse(data[i].extra)// 解析商家回复
          data[i].extra = extra

          const skus = JSON.parse(data[i].GoodsSku.skus)// 解析商品规格
          data[i].GoodsSku = skus
        }
      } catch (error) {
      }
    },
    // 商品详情图于商品评论切换
    handleSelect (index) {
      if (index === '1') {
        this.showImg = false
        this.showComment = true
      } else if (index === '2') {
        this.showImg = true
        this.showComment = false
      }
    },
    // 筛选评论
    evaluateClick (evaluate) {
      if (this.selected === evaluate) {
        this.selected = evaluate // 再次点击无法取消
      } else {
        this.selected = evaluate // 点击新的项时，更新为当前点击的项
      }
    },
    // 筛选评论
    tabsClick (tab) {
      console.log(tab)
      if (this.tabsbox === tab) {
        this.tabsbox = tab// 再次点击无法取消
      } else {
        this.tabsbox = tab // 点击新的项时，更新为当前点击的项
      }
    }
  },
  created () {
    this.reviewdata()
  }
}
</script>
<script setup>
const activeIndex = ref('1')
const optionvalue = ref('默认排序')
const options = [
  {
    value: 'option1',
    label: '默认排序'
  },
  {
    value: 'option2',
    label: '时间排序'
  }
]
</script>
<style scoped>
.kefu {
    width: 100%;
    min-height: 30px;
    background: rgba(0, 0, 0, 0.04);
    margin-top: 20px;
    padding: 15px 25px;
}

.kefu .name {
    font-size: 14px;
    margin-bottom: 10px;
}

.kefu .content {
    font-size: 12px;
}

.kefu span {
    font-size: 18px;
    line-height: 30px;
}

.qie {
    display: none;
}

.el-radio-button__inner {
    border: none;
}

.pinlun .evalute {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.pinlun .evalute span {
    margin: 0 10px;
    font-size: 14px;
    display: block;
    height: 32px;
    color: #676767;
    background: rgba(0, 0, 0, .04);
    border-radius: 3px;
    padding: 0px 15px;
    line-height: 32px;
    cursor: pointer;
}

.pinlun .evalute span:hover {
    background: rgba(253, 104, 35, 0.08);
    color: #ff6700;
}

.pinlun .evalute .selected {
    background: rgba(253, 104, 35, 0.08);
    color: #ff6700;
}

.lest {
    padding: 30px;
    border-bottom: 1px solid #eee;
}

.lest .user {
    display: flex;
    height: 60px;
}

.lest .user .v-avatar {
    height: 60px;
    width: 60px;
    margin-right: 20px;
}

.lest .user-flex {
    width: 100%;
}

.lest .user-flex .user-data {
    display: flex;
    justify-content: space-between;
}

.lest .review {
    margin-top: 40px;
}

.lest .review .imgs {
    margin-top: 20px;
}

.lest .review .imgs img {
    margin-right: 10px;
}

.tabs-box {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 25px;
}

.tabs-box div {
    display: flex;
}

.tabs-box div span {
    margin: 0 10px;
    font-size: 14px;
    display: block;
    height: 32px;
    color: #999;
    border-radius: 3px;
    padding: 0px 15px;
    line-height: 32px;
    cursor: pointer;
}

.tabs-box div .tabsbox {
    color: #000;
}
.xq-bg {

    >img {
        width: 100%
    }
}

.el-menu-demo {
    display: flex;
    justify-content: center;
}

.container-bg {
    margin: 30px 0 10px;
}
</style>
